<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>歌手专辑</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/share.css">
    <link rel="stylesheet" href="css/hot.css">
    <style>
        header{width:100%;height:auto;position:fixed;z-index:11;padding: 0;top:0;}
        header>div{width:100%;background-color:#00C0FF;padding:10px 20px;}
        header span:nth-child(1){width:8%;vertical-align: middle;}
        header span:nth-child(2){width:79%;color:#fff;font-size:1.6rem;text-align:center;vertical-align: middle;}
        header span:nth-child(3){width:8%;vertical-align: middle;text-align:right;}
    </style>
</head>
<body>
    <header>
        <div style="z-index:111;">
            <span class="return"><img src="images/return.png" alt="" style="width:40%;"></span>
            <span>歌手专辑</span>
            <span class="search hide"><img src="images/search_all.png" alt="" style="width:60%;"></span>
        </div>
    </header>
    <section style="padding:0;margin-top: 40px;">
        <div class="singer_title">
            <img src="images/title_back.png" alt="" style="width:100%;">
            <p><img id="user_logo"  alt=""></p>
        </div>
        <div class="album_box">
            <!--歌手专辑标题-->
            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#sing" data-toggle="tab">单曲</a></li>
                <li><a href="#MV" data-toggle="tab">MV</a></li>
                <li><a href="#details" data-toggle="tab">详情</a></li>
            </ul>
            <!--歌手专辑内容-->
            <div class="tab-content" style="margin-top:7rem;">
                <div class="tab-pane active" id="sing">
                    <div class="song_box singer_box">
                        <p>
                            <span class="j-lianxu-btn"><img src="images/hotSong_play.png" alt="" style="width:60%;"></span>
                            <span>连续播放 <b id="total_num"></b></span>
                            <span class="hide"><b></b>多选</span>
                        </p>
                        <ul id="music-box">
                           <!--  <li>
                                <div>
                                    <span>5</span>
                                </div>
                                <div>
                                    <span class="song_title">天之大 <b class="hq"></b><b class="mv"></b> </span>
                                    <span class="song_name">韩红</span>
                                </div>
                                <div class="fun"><img src="images/function.png" alt=""></div>
                            </li> -->
                            
                        </ul>
                        <p class="more j-more">加载中...</p>
                    </div>
                </div>
                <div class="tab-pane" id="MV">
                    <div class="mv_box">
                        <ul id="mv-box">
                            <!-- <li onclick="javascript:window.location.href='mv_details.html'">
                                <div>
                                    <img src="images/mv_pic.png" alt="">
                                    <p class="mv_top">
                                        <span><b></b></span>
                                        <span><b></b>1356</span>
                                    </p>
                                    <p class="mv_play"><img src="images/vision_play.png" alt=""></p>
                                    <p class="mv_title">
                                        <span>醉秋风</span>
                                        <span>06:23</span>
                                    </p>
                                </div>
                            </li> -->
                        </ul>
                        <p class="more j-more">加载中...</p>
                    </div>
                </div>
                <div class="tab-pane" id="details">
                    <div class="details_box" id="details-box">
                        <!-- <p class="details_title">
                            <span>降央卓玛</span>
                            <span>四川省成都市市辖区</span>
                        </p>
                        <div class="details_con">
                            <p>歌手简介</p>
                            <p>
                                1984年出生于四川省甘孜藏族自治州德格县的一个普通农户家庭。2005年毕业于四川音乐学院。
                                已出专辑《这山，这水》、《金色的呼唤》、《金色的辉煌》、《东女国》、《中国之声》、《金色的诱惑》、
                                《天下最美的女中音》等。
                            </p>
                        </div> -->
                    </div>
                    <p><img src="images/mv_back.png" alt="" style="width:100%;"></p>
                </div>
            </div>
        </div>
    </section>
    <div class="mask hide"></div>
    <div class="player-box hide"  id="player">
        <div class="player-list">
            <ul>

            </ul>
        </div>
        <div class="progress-wrapper">
            <span class="ticker cur"></span>
            <div class="progress">
                <div class="bar noUi-target noUi-ltr noUi-horizontal noUi-connect"><div class="noUi-base">
                    <div class="noUi-origin noUi-background noUi-stacking"><div class="noUi-handle noUi-handle-lower"></div></div></div></div>
            </div>
            <span class="duration j-duration"></span>
        </div>
        <p id="tip-cnetent"></p>
        <div class="col-6 iconcenter">
            <div class="iconfont icon-prev">&#xe60c;</div>
            <div class="iconfont icon-play-pause">&#xe600;</div>
            <div class="iconfont icon-play hide">&#xe607;</div>
            <div class="iconfont icon-next">&#xe611;</div>
        </div>
    </div>
    <audio id="h5audio_media" height="0" width="0" onerror="" src=""></audio>
    <!--图标-->
    <p class="icon j-open-player"><img src="images/listen_icon.png" alt=""></p>
    <!--功能及分享弹出框-->
    <div class="listen_box"></div>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/reqeust.js"></script>
    <script src="js/player.js"></script>
    <script>
        $(function () {
            var title = "",subtitle="",log="";
            if($C.query().mv){
                $("#myTab").find("li").eq(1).find("a").trigger("click");
            }
            $(".listen_box").load("share.html");
            $(".return>img").click(function () {
                history.back();
            });

            $(".search").click(function () {
                window.location.href = "search_all.html";
            });
            //歌手详情
            var id = $C.query().id;
            sendByUrl("/GetSingerDetail",{id:id},function(res){
                // $("#j-hot-song").append(template("song-list-temp", {
                //     list: res || []
                // }));
                var info = res.data && res.data.info && res.data.info.length > 0 && res.data.info[0] || {};
                var music = res.data && res.data.music || [];
                var mv = res.data && res.data.mv  || [];
                $("#user_logo").attr("src",info.head);
                $("#total_num").html("（共"+music.tatalRecord+"首）")
                $("#details-box").html(template("userinfo-temp", {
                    data: info
                }));

                $("#music-box").html(template("music-temp", {
                    data: music.data,
                    _default:0
                }));

                $("#mv-box").html(template("mv-temp", {
                    data: mv,
                    pageIndex:1
                }));
                if(music.data.length != _songParam.pageSize){
                    isSongOver = true;
                    $("#sing").find(".j-more").html("数据加载完了");
                }
                if(mv.length != _mvParam.pageSize){
                    isMvOver = true;
                    $("#mv").find(".j-more").html("数据加载完了");
                }
               // $(".j-more").hide();
            });
            //加载歌曲信息参数
            var _songParam = {
                pageSize:20,
                pageIndex:2,
                singerId:id
            };
            //加载Mv信息参数
            var _mvParam = {
                pageSize:20,
                pageIndex:2,
                singerId:id
            };
            var isloading = false;//是否在加载数据
            var isSongOver = false;//音乐是否加载完
            var isMvOver = false;//音乐是否加载完
            var _tabEl = $("#myTab").find("li");
            //下拉刷新
            $(window).on("scroll",function(){
                if($(document).scrollTop() >= $(document).height() - $(window).height() - 40) {
                    if(!isloading){
                        if(_tabEl.eq(0).hasClass("active")){
                            //歌曲
                            loadeMoreSong();
                        }else if(_tabEl.eq(1).hasClass("active")){
                            //Mv
                            loadeMoreMv();
                        }
                    }
                    
                }
            });
            //加载更多的歌曲
            function loadeMoreSong(){
                if(isSongOver){
                    return;
                }
                isloading = true;
                var _moreEl = $("#sing").find(".j-more");
                _moreEl.show().text("加载中...");
                sendByUrl("/GetMusicBySinger",_songParam,function(res){
                    if(res.hasValue == 'true' && res.data && res.data.data.length > 0){
                        $("#music-box").append(template("music-temp", {
                            data: res.data.data,
                            _default:(_songParam.pageIndex - 1) * _songParam.pageSize
                        }));
                        if(res.data.data.length == _songParam.pageSize){
                            _songParam.pageIndex++;
                        }else{
                            _moreEl.html("数据加载完了");
                            isSongOver = true;
                        }
                    }else{
                        _moreEl.html("数据加载完了");
                        isSongOver = true;
                    }
                    isloading = false;
                });
            }
            //加载更多的Mv
            function loadeMoreMv(){
                if(isMvOver){
                    return;
                }
                isloading = true;
                var _moreEl = $("#MV").find(".j-more");
                _moreEl.show().text("加载中...");
                sendByUrl("/GetMVBySinger",_mvParam,function(res){
                    if(res.hasValue == 'true' && res.data && res.data.length > 0){
                        $("#mv-box").append(template("mv-temp", {
                            data: res.data,
                            pageIndex:_mvParam.pageIndex
                        }));
                        if(res.data.length == _mvParam.pageSize){
                            _mvParam.pageIndex++;
                        }else{
                            _moreEl.html("数据加载完了");
                            isMvOver = true;
                        }
                    }else{
                        _moreEl.html("数据加载完了");
                        isMvOver = true;
                    }
                    isloading = false;
                });
            }
            // 显示功能及分享弹出框
            $("body").on(clickevent,".fun",function () {
                // alert($(this).attr("data-mp3").trim());
                var obj = $(this).parents("li");
                title = obj.find(".song_title").text().trim();
                subtitle = obj.find(".song_name").text().trim();
                log = $("#user_logo").attr("src");
                $(".box").removeClass("hide")//.find(".j-add-to-player").attr("data-mp3",$(this).attr("data-mp3").trim());
                $(".j-share-download").find("a").attr("href",$(this).parents("li").find(".j-add-to-player").attr("data-mp3").trim());
                $(".j-share-singer").attr("data-singerId",$(this).attr("data-singerId"));
                $(".j-share-mv").attr("data-singerId",$(this).attr("data-singerId"));
            });
            $("body").on(clickevent,".share_item",function () {
                var id = $(this).attr("data-id");
                shareInfo(title,subtitle,location.href,log,id);
            })
        });
        
    </script>
    <script id="userinfo-temp" type="text/html">
        <p class="details_title">
            <span>{{data.name}}</span>
            <span>{{data.provice+data.city+data.area}}</span>
        </p>
        <div class="details_con">
            <p>歌手简介</p>
            <p>
                {{data.detail}}
            </p>
        </div>
    </script>
    <!--音乐-->
    <script id="music-temp" type="text/html">
    {{each data as item i}}
        <li data-id="{{item.mp3Id}}" data-mv="{{item.MV}}" >
            <div>
                <span>{{i+1+_default}}</span>
            </div>
            <div data-mp3="
                {{if item.path128 && item.path128.indexOf('.mp3') > -1}}
                    {{item.path128}}
                {{else if item.path192 && item.path192.indexOf('.mp3') > -1}}
                    {{item.path192}}
                {{else if item.path320 && item.path320.indexOf('.mp3') > -1}}
                    {{item.path320}}
                {{/if}}" class="j-add-to-player">
                <span class="song_title title">{{item.mp3Name}}
                {{if item.HQ}}
                <b class="hq"></b>
                {{/if}}
                {{if item.MV}}
                <b class="mv"></b> 
                {{/if}}
                </span>
                {{if item.singer && item.singer.length > 0}}
                <span class="song_name name">{{item.singer[0].name}}</span>
                {{/if}}
            </div>
            <div class="fun" ><img src="images/function.png" alt=""></div>
        </li>
    {{/each}}
    </script>
    <script id="mv-temp" type="text/html">
    {{each data as item i}}
        <li onclick="javascript:window.location.href='mv_details.html?mvId={{item.MVId}}&singerId={{item.singer[0].id}}&pageIndex={{pageIndex}}'">
            <div>
                <img src="{{item.MVImg}}" alt="">
                <p class="mv_top">
                    <span><b></b></span>
                    {{if item.MVPV > 0}}
                    <span><b></b>{{item.MVPV}}</span>
                    {{/if}}
                </p>
                <p class="mv_play"><img src="images/vision_play.png" alt=""></p>
                <p class="mv_title">
                    <span>{{item.MVName}}</span>
                    <span>06:23</span>
                </p>
            </div>
        </li>
    {{/each}}
    </script>
</body>
</html>